page-historical-performance {
    @function pxToVw($px) {
        @return $px/1080*100vw;
    }
    ion-header {
        .performanceHead {
            background: #fff;
            .groupTab {
                position: relative;
                height: pxToVw(150);
                line-height: pxToVw(150);
                span {
                    display: inline-block;
                    text-align: center;
                    width: 49%;
                    color: #333;
                    font-size: pxToVw(54);
                    &.active {
                        color: #35ac63 !important;
                        background-color: transparent !important;
                    }
                }
                .switch-sign {
                    position: absolute;
                    width: pxToVw(175);
                    height: pxToVw(10);
                    bottom: pxToVw(-5);
                    left: 0;
                    margin-left: pxToVw(180);
                    background-color: #35ac63;
                    transition: all .15s linear;
                    display: block;
                }
                .sign-change {
                    transition: all .15s linear;
                    margin-left: pxToVw(715);
                }
            }
            .groupType {
                box-shadow: 0 1vw pxToVw(30) rgba(0, 0, 0, 0.1);
                height: pxToVw(180);
                background: #fff;
                padding: 0 pxToVw(30);
                border-top:0.2vw solid #e9e9e9;
                display: flex;
                align-items:center;
                span {
                    display: inline-block;
                    font-size: pxToVw(42);
                    line-height: pxToVw(140);
                    width: 22%;
                    text-align: center;
                    font-weight: bold;
                }
                .typeName {
                    width:13.6%;
                }
                .thisYear {
                    width:23.8%;
                }
                .hisTop{
                    width:23.8%;
                }
                .chaju{
                    width:23.8%;
                }
                .divLeft {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-size: pxToVw(42);
                    height: pxToVw(140);
                    width:15%;
                    font-weight: bold;
                }
            }
        }
    }
    ion-content {
        ion-fab {
            bottom: 5.56vw !important;
            right: 5.56vw !important;
            .fab-ios-light {
                background-color: transparent;
                width: computed-vw(96);
                height: computed-vw(96);
                padding: 0;

                .go-up-icon {
                    width: computed-vw(96);
                    height: computed-vw(96);
                    max-width: none;
                }
            }
        }
        .fab-ios-light {
            background-color: transparent;
        }
        .groupList {
            padding: pxToVw(45) pxToVw(30);
            background: #f5f5f5;
            .groupItem {
                background: #fff;
                //width: pxToVw(1020);
                width:100%;
                margin-bottom:pxToVw(45);
                height: pxToVw(280);
                box-shadow: 0 0 pxToVw(30) rgba(0, 0, 0, 0.1);
                -webkit-border-radius: 3vw;
                -moz-border-radius: 3vw;
                border-radius: 3vw;
                .leaderName {
                    float: left;
                    font-size:pxToVw(42);
                    color: #35ac63;
                    height: 25.92593vw;
                    width: 15%;
                    //width:pxToVw(176);
                    padding-top: 7vw;
                    text-align: center;
                    word-break: break-all;
                    span {
                        color: #999;
                        font-size: pxToVw(36);
                        display: block;
                    }
                }

                .groupRight {
                    color: #333333;
                    font-size: pxToVw(36);
                    float: right;
                    width: 85%;

                    .groRightTop, .groRightBot {
                        height: pxToVw(140);
                        span {
                            width: 28%;
                            text-align: center;
                            float: left;
                        }
                        .fontBigger {
                            font-size: pxToVw(33);
                        }
                    }
                    .groRightBot {
                        border-top: pxToVw(5) solid #F9F9F9;
                        height: pxToVw(139);
                        line-height: pxToVw(139);
                        .typeName {
                            padding-top: pxToVw(10);
                            float: left;
                            line-height: pxToVw(60);
                        }
                    }
                    .groRightTop {
                        line-height: pxToVw(140);

                    }
                    .title {
                        font-size: pxToVw(36);
                        width: 16% !important;
                    }
                }
            }
        }
    }
}
